<!-- 分类根组件 -->
<template>
  <div class="category">
    <CategoryHeader :flag="flag"/>
    <div class="category-content">
      <div class="category-left">
        <ul>
          <li
            :class="{active:leftListData.cat_id==cat_id}"
            v-for="(leftListData,index) in leftListDatas"
            :key="leftListData.cat_id"
            @click="changeCate(leftListData.cat_id,index)"
          >{{leftListData.cat_name}}</li>
        </ul>
      </div>
      <div class="category-right">
        <div class="content">
          <div class="ad">
            <img :src="adDatas" alt>
          </div>
          <ul class="list">
            <li v-for="rightListData in rightListDatas" :key="rightListData.cat_id">
              <h3>{{rightListData.cat_name}}</h3>
              <ul>
                <li v-for="rightList in rightListData.child" :key="rightList.cat_id">
                  <router-link :to="'/list/'+rightList.cat_id+'?title='+rightList.cat_name">
                    <img :src="rightList.touch_icon" alt>
                    <p>{{rightList.cat_name}}</p>
                  </router-link>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import CategoryHeader from "./CategoryHeader.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    CategoryHeader
  },
  data() {
    //这里存放数据
    return {
      cat_id: 858,
      index: 0,
      flag: false
    };
  },
  //方法集合
  methods: {
    changeCate(cat_id, index) {
      // console.log(cat_id);
      this.cat_id = cat_id;
      this.index = index;
      this.$store.dispatch("actChangeCategoryLeftDatas", this.cat_id);
      this.$store.dispatch("actChangeCategoryRightDatas", this.cat_id);
    }
  },
  computed: {
    leftListDatas() {
      return this.$store.state.categoryLeftDatas;
    },
    rightListDatas() {
      return this.$store.state.categoryRightDatas;
    },
    adDatas() {
      return this.$store.state.cateAd;
    }
  },
  mounted() {
    this.$store.dispatch("actChangeCategoryLeftDatas", this.cat_id);
    this.$store.dispatch("actChangeCategoryRightDatas", this.cat_id);
    // console.log(this.$store.getters.cateDatas);
  }
};
</script>
<style lang="less">
.category-content {
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  position: absolute;
  top: 4.4rem;
  bottom: 4.9rem;
  height: calc(100% - 9.3rem);
  .category-left {
    width: 8.5rem;
    background: #ccc;
    ul {
      li {
        width: 8.5rem;
        height: 3.8rem;
        font-size: 1.4rem;
        line-height: 3.8rem;
        text-align: center;
      }
      .active {
        background: #fff;
        color: #f55;
      }
    }
  }
  .category-right {
    width: 100%;
    width: (100% - 8.5rem);
    overflow-y: auto;
    .content {
      .ad {
        width: 94%;
        margin-left: 3%;
        img {
          width: 100%;
          margin-top: 1rem;
        }
      }
      .list {
        li {
          h3 {
            text-align: center;
            height: 4.4rem;
            line-height: 4.4rem;
            font-size: 1.4rem;
          }
          ul {
            display: flex;
            flex-wrap: wrap;
            li {
              width: 33%;
              text-align: center;
              img {
                width: 5.2rem;
                height: 5.2rem;
              }
              p {
                line-height: 3rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>